<template>
	<!-- swiper插件使用 -->
	<!-- https://www.imooc.com/article/68364 -->
	<!-- http://idangero.us/swiper/demos/ -->
  <div class="m-swiper swiper-container" ref="swiper">
		<div class="swiper-wrapper">
      <div 
				class="swiper-slide"
				v-for="item of imgList"
				:key="item.id"
			>
				<div class="pic">
					<img :src="item.img" />
				</div>
			</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>-->
	</div>
</template>

<script>  
	import 'swiper/dist/css/swiper.css'
	import Swiper from 'swiper';
	
	export default {
		name: "mySwiper",
		props: {
			imgList: {
				type: Array,
				default: () => []
			},
			loop: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			dots: {
				type: Boolean,
				default: true
			},
			arrows: {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
			}
		},
		mounted(){
			console.log(11111);
			var self = this;
			this.$nextTick(vm => {
				new Swiper (self.$refs.swiper, {
					loop: self.loop, 
					autoplay: self.autoplay,
					// 点
					pagination: self.dots ? {
						el: '.swiper-pagination',
					}:{
					},
					// 如果需要前进后退按钮          
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					// 如果需要滚动条        
					// scrollbar: '.swiper-scrollbar',
				})
			})
		},
		methods: {
		}
	}
</script>
